<template>
  <view class="box">
    <template v-if="!loding">
      <!-- 帮友圈详情 -->
      <view class="tou fixed" :style="'padding-top:' + statusBarHeight1 + 'px;' + paddingR">
        <image
          @click="fanhui"
          class="image1"
          src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
        />
        <!-- #ifdef APP-PLUS -->
        帮友圈
        <!-- <image class="image2" style="margin-right: 20rpx;" @click="fn" src="https://pic.bangbangtongcheng.com/5bfdd20804944e49ac44a6d4acbf1225"/> -->
        <!-- #endif -->
        <!-- #ifndef APP-PLUS -->
        <!-- style="position: absolute; left: 50%; transform: translateX(-50%)" -->
        <text @click="fanhui">帮友圈</text>
        <!-- #endif -->
        <view class="genduoNew" @click.stop="moreChage = !moreChage">
          <image
            src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/black-more.png"
          >
          </image>
          <view class="administrations" v-if="moreChage">
            <text class="items" style="border-bottom: none" @click="jubao"> 举报 </text>
          </view>
        </view>
      </view>
      <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
      <view class="center" style="margin-top: 20rpx">
        <view class="headPortrait" @click.stop="userfy()">
          <image
            class="img1"
            v-if="!jjInfo.image"
            src="https://pic.bangbangtongcheng.com/static/my/header.png"
          />
          <image class="img1" :src="jjInfo.image" v-else />
        </view>
        <view style="flex: 1">
          <view class="mingpian">
            <view class="mingpian_left">
              <view class="counselor">
                <view class="counselor_top">
                  <view class="name">{{ jjInfo.nikeName || '未命名用户' }}</view>
                </view>
                <text
                  class="vip-rank"
                  :style="{
                    color: $member.colors()[jjInfo.memberLevel - 1].wordColor,
                    backgroundColor: $member.colors()[jjInfo.memberLevel - 1].bgColor,
                    borderColor: $member.colors()[jjInfo.memberLevel - 1].lineColor,
                  }"
                >
                  {{ $member.colors()[jjInfo.memberLevel - 1].level }}
                </text>
              </view>
            </view>
            <view class="mingpian_right">
              <view v-if="gainByqDatas.userInfo.id !== userInfo.id" class="item" @click.stop="guanzhu()">
                <image
                  class="image1"
                  v-if="gainByqDatas.whetherCollection == 0"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/guanzhu.png"
                  mode=""
                ></image>
                <image
                  v-else
                  class="image1"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/guanzhu01.png"
                  mode=""
                ></image>
                <view class="">
                  {{ gainByqDatas.whetherCollection == 0 ? '收藏' : '已收藏' }}
                </view>
              </view>
            </view>
          </view>
          <view class="circle_center_wz">
            <text class="circle_center_wz_text">
              {{ gainByqDatas.content }}
            </text>
            <view class="circle_center_wz_img">
              <!-- 发布为图片 -->
              <template v-if="gainByqDatas.picture">
                <view v-if="gainByqDatas.pictureArr.length == 1">
                  <image
                    class="circle_center_wz_imgss"
                    mode="heightFix"
                    :src="gainByqDatas.pictureArr[0]"
                    @click.stop="ViewImage(gainByqDatas.pictureArr, gainByqDatas.pictureArr[0])"
                  ></image>
                </view>
                <view
                  :class="
                    gainByqDatas.pictureArr.length > 2
                      ? 'circle_center_wz_imgss_d'
                      : 'circle_center_wz_imgss_ds'
                  "
                  v-else
                >
                  <image
                    class="image"
                    v-for="(i, j) in gainByqDatas.pictureArr"
                    :src="i"
                    :key="j"
                    mode="aspectFill"
                    @click.stop="ViewImage(gainByqDatas.pictureArr, gainByqDatas.pictureArr[j])"
                  ></image>
                </view>
              </template>
              <!-- 发布为视频 -->
              <template v-if="gainByqDatas.video">
                <view class="circle_center_wz_img_vid" @click.stop="videoClick(gainByqDatas.video)">
                  <image
                    style="max-height: 290rpx"
                    :src="gainByqDatas.video + '?vframe/jpg/offset/0'"
                    mode="heightFix"
                  >
                  </image>
                  <image
                    class="images"
                    src="https://pic.bangbangtongcheng.com/static/bbcz/mdlb-sp01.png"
                    mode=""
                  ></image
                  ><strong></strong>
                </view>
              </template>
            </view>
          </view>
          <view
            style="
              width: 100%;
              display: flex;
              align-items: flex-start;
              margin-left: 30rpx;
              margin-top: 20rpx;
            "
            @click.stop="openMap()"
            v-if="gainByqDatas.detailedAddress"
          >
            <image
              style="width: 40rpx; height: 40rpx"
              src="https://pic.bangbangtongcheng.com/static/bbcz/dingwei01.png"
              mode=""
            ></image>
            <view style="width: 500rpx">{{
              gainByqDatas.detailedAddress.slice(3, gainByqDatas.detailedAddress.length)
            }}</view>
          </view>
          <view class="circle_bottom">
            <view class="circle_left">
              {{ $Time.getDateDiff(gainByqDatas.createDate) }}
            </view>
            <view class="circle_right">
              <view class="circle_right_item">
                <image
                  class="image2"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/eye01.png"
                  mode=""
                ></image
                >{{ gainByqDatas.views || 0 }}
              </view>
              <view class="circle_right_item" @click.stop="dianzan(1)">
                <image
                  class="image3"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/dz01.png"
                  mode=""
                  v-if="gainByqDatas.whetherThumbsUp != 1"
                ></image>
                <image
                  class="image3"
                  src="https://pic.bangbangtongcheng.com/static/dz01.png"
                  mode=""
                  v-else
                ></image>
                {{ gainByqDatas.upThumb }}
              </view>
              <view class="circle_right_item" @click.stop="diancai(2)">
                <image
                  class="image3"
                  style="width: 38rpx; height: 36rpx"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/dc01.png"
                  mode=""
                  v-if="gainByqDatas.whetherThumbsDown != 1"
                ></image>
                <image
                  class="image3"
                  style="width: 38rpx; height: 36rpx"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/dc02.png"
                  mode=""
                  v-else
                ></image>
                {{ gainByqDatas.downThumb }}
              </view>
              <!-- #ifdef APP-PLUS -->
              <view class="circle_right_item" @click="fn">
                <image
                  class="image4"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/zf01.png"
                  mode=""
                ></image>
                {{ gainByqDatas.forwardingVolume }}
              </view>
              <!-- #endif -->
              <!-- #ifndef APP-PLUS -->
              <view class="circle_right_item">
                <image
                  class="image4"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/zf01.png"
                  mode=""
                ></image>
                {{ gainByqDatas.forwardingVolume }}
              </view>
              <!-- #endif -->
            </view>
          </view>
        </view>
      </view>
      <view class="reward" @click="reward()">
        <view style="position: relative; width: 100%; height: 100%">
          <span class="spans">打赏</span>
          <image
            class="image"
            src="https://pic.bangbangtongcheng.com/static/reward.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="mzsm">
        {{ disclaimers }}
      </view>
      <previewImgV ref="previewImgV"></previewImgV>
      <uniBall></uniBall>
    </template>
    <dLoading v-if="loding"></dLoading>
  </view>
</template>
<script>
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5
  //  #endif
  import previewImgV from '@/components/previewImgV.vue'
  export default {
    data() {
      const pr = this.$menuBtnInfo.pr ? `padding-right: ${this.$menuBtnInfo.pr + 5}px` : '';
      return {
        paddingR: pr,
        statusBarHeight,
        userInfo: uni.getStorageSync('Pduser'),
        moreChage: false,
        imgUrl: this.$imgSrc,
        id: '',
        gainByqDatas: {},
        jjInfo: {},
        loding: true,
        colors: [
          {
            bgColor: '#E9EFEF',
            wordColor: '#60807D',
            lineColor: '#B6C4C3',
            level: '青铜会员',
          },
          {
            bgColor: '#F7F7F7',
            wordColor: '#A3AAB0',
            lineColor: '#D2D9E0',
            level: '白银会员',
          },
          {
            bgColor: '#FFF8DE',
            wordColor: '#CEAB21',
            lineColor: '#D3CAB2',
            level: '黄金会员',
          },
          {
            bgColor: '#EDFAFF',
            wordColor: '#59B0E6',
            lineColor: '#BBD0DB',
            level: '铂金会员',
          },
          {
            bgColor: '#F2F5FF',
            wordColor: '#284EB6',
            lineColor: '#C1CBEF',
            level: '钻石会员',
          },
          {
            bgColor: '#FDF7FF',
            wordColor: '#A877C6',
            lineColor: '#DBC6E8',
            level: '钻石Ⅰ会员',
          },
          {
            bgColor: '#F8F2FF',
            wordColor: '#78439F',
            lineColor: '#958AC3',
            level: '钻石Ⅱ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#8D4581',
            lineColor: '#907B8C',
            level: '钻石Ⅲ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#502E30',
            lineColor: '#795D5E',
            level: '王者会员',
          },
        ],
        disclaimers: '',
        users: '',
        llindex: 1,
      }
    },
    components: {
      previewImgV: previewImgV,
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad(option) {
      this.id = option.id
      if (!option.id && option.scene) {
        this.id = option.scene
      }
      // this.gainByqData();
      this.Disclaimers()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onShow() {
      this.gainByqData()
    },
    methods: {
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages_owner/my/friendsCircleReport?id=${this.id}&userId=${this.jjInfo.id}`,
        })
      },
      userfy() {
        if (!this.showLogin()) {
          return
        }
        if (this.users.businessType == 1 && this.users.shopType == 2 && this.users.isShop == 1) {
          if (!yy.buildingId) {
            uni.showToast({
              title: '该商家还未发布楼盘！',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_houses/houses/housesDetails?id=' + this.users.buildingId,
          })
          return
        }
        if (this.users.businessType == 0 && this.users.enterpriseRecruitmentStatus == 1) {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + this.users.id,
          })
          return
        }
        uni.navigateTo({
          url: '/pages_owner/dealer/goldConsultant?userId=' + this.jjInfo.id,
        })
      },
      getjjr() {
        let that = this
        this.$myRequest
          .get('/api/mobile/public/getPersonalHome', {
            otherId: this.jjInfo.id,
            ownerId: this.userInfo.id,
          })
          .then((res) => {
            this.users = res.personalHomeData
          })
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '1',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      reward() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url:
            '/pages_owner/my/rewardDetails?userId=' +
            this.gainByqDatas.userInfo.id +
            '&name=' +
            (this.gainByqDatas.userInfo.nikeName || '') +
            '&image=' +
            (this.gainByqDatas.userInfo.image || ''),
        })
      },
      // 点击会员
      goMyLevel() {
        uni.navigateTo({
          url: '/pages_my/bangClub',
        })
      },
      lljl() {
        if (!this.userInfo.phone) {
          return
        }
        if (this.jjInfo.id == this.userInfo.id) {
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseBrowsingRecord', {
            browseRecordId: this.id,
            viewersId: this.userInfo.id,
            businessType: 2,
            browsingRecords: 3,
          })
          .then((res) => {
            this.llindex = 2
          })
      },
      openMap() {
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(this.gainByqDatas.latitude), //目的地latitude
                longitude: Number(this.gainByqDatas.longitude), //目的地longitude
                // name: that.data.title,
                // address: that.data.address,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(this.gainByqDatas.latitude),
          longitude: Number(this.gainByqDatas.longitude),
          name: this.gainByqDatas.detailedAddress,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      ViewImage(url, urls) {
        uni.previewImage({
          urls: url,
          current: urls,
        })
      },
      videoClick(e) {
        this.$refs.previewImgV.open(e)
      },
      guanzhu() {
        if (!this.showLogin()) {
          return
        }
        let that = this
        this.$myRequest
          .post('/api/mobile/vehicleOwner/collectionOrCancelCollection', {
            collectorId: this.userInfo.id,
            relationId: this.gainByqDatas.id,
            collectionType: '3',
            ids: this.gainByqDatas.collectionAttention
              ? this.gainByqDatas.collectionAttention.id
              : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            if (this.gainByqDatas.whetherCollection == 0) {
              this.addIntegral(5, '收藏帮友圈')
            }
            this.gainByqData()
          })
      },
      dianzan(pd) {
        if (!this.showLogin()) {
          return
        }
        if (this.jjInfo.id === this.userInfo.id) {
          uni.showToast({
            title: '同一账号发布不可点赞',
            icon: 'none',
            mask: true,
          })
          return false;
        }
        let that = this
        let data = {}
        if (this.gainByqDatas.whetherThumbsUp != 1) {
          data = {
            userId: this.userInfo.id,
            circleId: this.gainByqDatas.id,
            type: pd,
          }
        } else {
          data = {
            userId: this.userInfo.id,
            circleId: this.gainByqDatas.id,
            id: this.gainByqDatas.likeRecord ? this.gainByqDatas.likeRecord.id : '',
            type: pd,
          }
        }
        this.$myRequest.post('/api/mobile/vehicleOwner/upperOrCancelThumb', data).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          if (this.gainByqDatas.whetherThumbsUp == 0) {
            this.addIntegral(6, '点赞')
          }
          this.gainByqData()
        })
      },
      diancai(pd) {
        if (!this.showLogin()) {
          return
        }
        if (this.jjInfo.id === this.userInfo.id) {
          uni.showToast({
            title: '同一账号发布不可点踩',
            icon: 'none',
            mask: true,
          })
          return false;
        }
        let that = this
        let data = {}
        if (this.gainByqDatas.whetherThumbsDown != 1) {
          data = {
            userId: this.userInfo.id,
            circleId: this.gainByqDatas.id,
            type: pd,
          }
        } else {
          data = {
            userId: this.userInfo.id,
            circleId: this.gainByqDatas.id,
            id: this.gainByqDatas.likeRecord ? this.gainByqDatas.likeRecord.id : '',
            type: pd,
          }
        }
        this.$myRequest.post('/api/mobile/vehicleOwner/downOrCancelThumb', data).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          this.gainByqData()
        })
      },
      // 增加帮帮豆
      addIntegral(val, title) {
        this.$myRequest
          .post('/mob/iteration/addIntegral', {
            userId: this.userInfo.id,
            ruleNumber: val,
            title: title,
          })
          .then((res) => {})
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.setWxShare(re.data)
          },
        })
      },
      setWxShare(data) {
        let _this = this
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'openLocation'],
        })
        wxshare.ready(function () {
          this.share()
          //分享给朋友
          wxshare.updateAppMessageShareData({
            title: this.jjInfo.nikeName || '未命名用户', // 分享标题
            desc: '我正在看，' + this.jjInfo.nikeName || '未命名用户' + '赶紧跟我一起来查看！', // 分享描述
            link: `https://www.bangbangtongcheng.com/conven_web/#/pages_owner/index/vehicleDetails?id=${this.data.id}`, // 当前页面链接pp
            imgUrl: 'https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png', // 分享图标
            success: function () {
              //分享成功回调
            },
            cancel: function () {
              //取消分享回调
            },
          })
          wxshare.updateTimelineShareData({
            title: this.jjInfo.nikeName || '未命名用户', // 分享标题
            desc: '我正在看，' + this.jjInfo.nikeName || '未命名用户' + '赶紧跟我一起来查看！', // 分享描述
            link: `https://www.bangbangtongcheng.com/conven_web/#/pages_owner/index/friendsCircleDetails?id=${this.id}`, // 当前页面链接pp
            imgUrl: 'https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png', // 分享图标
            success: function () {},
            cancel: function () {},
          })
        })
      },
      onShareAppMessage: function (res) {
        let that = this
        this.share()
        if (res.from === 'menu') {
        }
        return {
          title: '我正在看，' + this.jjInfo.nikeName || '未命名用户' + '赶紧跟我一起来查看！',
          path: '/pages_owner/my/friendsCircleDetails?id=' + this.id,
          desc: '找车就用帮帮同城',
          imageUrl: 'https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png',
        }
      },
      onShareTimeline() {
        this.share()
        return {
          title: '我正在看，' + this.jjInfo.nikeName || '未命名用户' + '赶紧跟我一起来查看！',
          path: '/pages_owner/my/friendsCircleDetails?id=' + this.id,
          imageUrl: 'https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png',
        }
      },
      share() {
        this.$myRequest
          .post('/api/mobile/vehicleOwner/helpingFriendsCircleforward', {
            circleId: this.id,
            userId: this.userInfo.id,
          })
          .then((res) => {})
      },
      // 获取帮友圈信息
      gainByqData() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryHelpingFriendsCircleDetailsById', {
            id: this.id,
            userId: this.userInfo.id,
          })
          .then((res) => {
            if (res.msg == '该帮友圈已删除！') {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                })
              }, 500)
              return
            }
            if (res.helpingFriendsCircleDetails.picture) {
              let arr = res.helpingFriendsCircleDetails.picture.split('|')
              let pictureArr = []
              arr.forEach((el) => {
                pictureArr.push(el)
              })
              res.helpingFriendsCircleDetails.pictureArr = pictureArr
            }
            this.gainByqDatas = res.helpingFriendsCircleDetails
            this.jjInfo = res.helpingFriendsCircleDetails.userInfo
            if (this.llindex == 1) {
              this.lljl()
            }
            this.getjjr()
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
              }, 1000)
            })
          })
      },
      fanhui() {
        // uni.navigateBack({
        //   delta: 1,
        // })
        const cuPages = getCurrentPages(); // 看是否为第一页，不是第一页就传2去首页
        if (cuPages.length > 1) uni.navigateBack({
            delta: 1,
        })
        else uni.switchTab({
          url: '/pages/index/index'
        });
      },
      setImageView(str){
        let newStr = str;
        newStr.includes('?') ? newStr += '&' : newStr += '?';
        newStr += 'imageView2/1/w/300/h/300';
        return newStr;
      },
      fn() {
        const defaultImg = 'https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png';
        const imageUrl = this.jjInfo.image ? this.setImageView(this.jjInfo.image) : defaultImg;
        uni.showActionSheet({
          itemList: ['分享到微信好友', '分享到微信朋友圈'],
          success: (res) => {
            this.share()
            let wsxcene = null
            if (res.tapIndex == 0) {
              //分享到好友 可以发送小程序
              wsxcene = 'WXSceneSession'
              uni.share({
                provider: 'weixin',
                scene: wsxcene,
                type: 5,
                title: this.jjInfo.nikeName || '未命名用户',
                imageUrl,
                miniProgram: {
                  id: 'gh_c8b17811efca',
                  path: 'pages_owner/my/friendsCircleDetails?id=' + this.id,
                  type: 0,
                  webUrl:
                    'https://www.bangbangtongcheng.com/conven_web/#/pages_owner/my/friendsCircleDetails?id=' +
                    this.id,
                },
                // summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
                success: function (res) {
                  console.log('success:' + JSON.stringify(res))
                },
                fail: function (err) {
                  console.log('fail:' + JSON.stringify(err))
                },
              })
            } else {
              uni.downloadFile({
                url: imageUrl, //仅为示例，并非真实的资源
                success: (res) => {
                  if (res.statusCode === 200) {
                    let name = res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/') + 1) //截取文件名
                    plus.zip.compressImage(
                      {
                        src: res.tempFilePath, //下载完图片的临时路径
                        dst: '_doc/photoData/' + name, //存储压缩完图片的临时路径
                        overwrite: true, //再次压缩会覆盖掉上次的目录
                        width: '150px', //缩放图片的宽度
                        height: '100px', //缩放图片的高度
                        quality: 5, //压缩图片质量,值越低,图片占内存越低
                      },
                      (event) => {
                        //压缩成功
                        wsxcene = 'WXSceneTimeline' //分享到朋友圈 只能H5 或者图片
                        uni.share({
                          provider: 'weixin',
                          scene: wsxcene,
                          type: 0,
                          title: this.jjInfo.nikeName || '未命名用户',
                          href:
                            'https://www.bangbangtongcheng.com/conven_web/#/pages_owner/my/friendsCircleDetails?id=' +
                            this.id,
                          imageUrl: event.target,
                          summary:
                            '我正在看，' + this.jjInfo.nikeName ||
                            '未命名用户' + '赶紧跟我一起来查看！',
                          success: function (res) {
                            console.log('success:' + JSON.stringify(res))
                          },
                          fail: function (err) {
                            console.log('fail:' + JSON.stringify(err))
                          },
                        })
                      },
                      (error) => {
                        //压缩失败
                        uni.showToast({
                          title: '压缩失败',
                          icon: 'none',
                        })
                      }
                    )
                  }
                },
              })
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  /deep/.dengLoadingVue .maskVueHiddenShow {
    z-index: 99;
  }
  .tou.top {
    // box-sizing: border-box;
    width: 50%;
    background-color: #fff;
  }
  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
  }
  .vip-rank {
    padding: 3rpx 10rpx;
    margin: 0 18rpx 0 0;
    background: #f6f0ff;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    opacity: 1;
    border: 2rpx solid #bd90d9;
    font-size: 24rpx;
    font-weight: 500;
    color: #bd90d9;
  }
  .reward {
    width: 144rpx;
    height: 144rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    .image {
      width: 100%;
      height: 100%;
    }
    .spans {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;

    .image1 {
      // position: absolute;
      width: 32rpx;
      height: 32rpx;
      // left: 30rpx;
    }
    .image2 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      right: 30rpx;
    }
    .p2 {
      position: absolute;
      bottom: 0rpx !important;
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      bottom: 16rpx !important;
      /* #endif */
    }

    .genduoNew {
      position: relative;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .administrations {
        width: 140rpx;
        background-color: #fff;
        position: absolute;
        right: -12rpx;
        box-shadow: 0px 0px 20px 1px #d0d0d0;
        z-index: 100;
        padding: 0 32rpx;
        display: flex;
        flex-direction: column;

        .items {
          height: 72rpx;
          color: #5a5e66;
          font-size: 28rpx;
          font-weight: 500;
          border-bottom: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &::before {
          content: '';
          display: inline-block;
          border-left: 24rpx solid transparent;
          border-right: 20rpx solid transparent;
          border-bottom: 24rpx solid #fff;
          position: absolute;
          right: 12rpx;
          top: -22rpx;
        }
      }
    }
  }
  .center {
    margin-left: 50rpx;
    margin-right: 50rpx;
    display: flex;
    .headPortrait {
      width: 90rpx;
      height: 90rpx;
      position: relative;
      flex-shrink: 0;
      .img1 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .img2 {
        position: absolute;
        bottom: -14rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100rpx;
        height: 40rpx;
        background-image: url('https://pic.bangbangtongcheng.com/static/bbcz/jpgw01.png');
        background-size: 100% 120%;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
      }
    }
    .mingpian {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .mingpian_left {
        display: flex;
        /* margin-left: 30rpx; */
        .counselor {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 23rpx;
          height: 130rpx;

          .counselor_top {
            display: flex;
            align-items: center;
            width: 360rpx;
            .name {
              font-size: 28rpx;
              font-weight: 550;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .attention {
              display: flex;
              margin-left: 12rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;

              .img4 {
                width: 41rpx;
                height: 41rpx;
                margin-right: 4rpx;
              }
            }
          }

          .counselor_bottom {
            display: flex;
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;

            .img3 {
              width: 31rpx;
              height: 31rpx;
              margin-left: 5rpx;
            }
          }
        }
      }

      .mingpian_right {
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .image1 {
            width: 44rpx;
            height: 44rpx;
          }
        }
      }
    }

    .circle_center {
      width: 630rpx;
      height: 290rpx;
      border-radius: 18rpx;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 24rpx;
    }

    .circle_center_wz {
      margin-left: 30rpx;
      margin-top: 20rpx;

      .circle_center_wz_text {
        font-size: 32rpx;
        font-weight: 500;
        word-break: break-all;
        line-break: anywhere;
        color: #333333;
      }

      .circle_center_wz_img {
        margin-top: 20rpx;

        .circle_center_wz_imgss {
          width: 100%;
          max-width: 530rpx;
          height: 290rpx;
          /* border-radius: 18rpx; */
        }

        .circle_center_wz_imgss_d {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          /* justify-content: space-between; */

          .image {
            width: 170rpx;
            height: 170rpx;
            border-radius: 10rpx;
            margin-bottom: 8rpx;
            margin-right: 8rpx;
          }
          .image:nth-child(3n) {
            margin-right: 0;
          }
        }

        .circle_center_wz_imgss_ds {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .image {
            width: 170rpx;
            height: 170rpx;
            margin-right: 10rpx;
            border-radius: 10rpx;
            margin-bottom: 10rpx;
          }
        }

        .circle_center_wz_img_vid {
          /* max-width: 630rpx; */
          /* max-height: 290rpx; */
          position: relative;
          display: inline-block;
          image {
            max-width: 510rpx;
          }
          .images {
            width: 74rpx;
            height: 74rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 550rpx;
          }
        }
      }
    }

    .circle_bottom {
      margin-top: 30rpx;
      margin-left: 30rpx;
      margin-bottom: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .circle_left {
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
      }

      .circle_right {
        display: flex;
        align-items: center;

        .circle_right_item {
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          height: 37rpx;
          color: #64b6a8;

          .image2 {
            width: 32rpx;
            height: 30rpx;
            margin-right: 4rpx;
          }

          .image3 {
            width: 32rpx;
            height: 30rpx;
            margin-right: 4rpx;
          }

          .image4 {
            width: 34rpx;
            height: 34rpx;
            margin-right: 4rpx;
          }
        }
        .circle_right_item:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .mzsm {
    margin: 0 50rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #989898;
    margin-top: 40rpx;
  }
  .vip-rank {
    width: 120rpx;
    padding: 3rpx 10rpx;
    margin: 0 18rpx 0 0;
    background: #f6f0ff;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    opacity: 1;
    border: 2rpx solid #bd90d9;
    font-size: 24rpx;
    font-weight: 500;
    color: #bd90d9;
    text-align: center;
  }
  .fixed {
    // display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }
</style>
